// TingModify에서 쓰는 MapOverlay!!


Ext.define('Triends.view.MapOverlay3',{ // TingModify에서 requires로 잡아주고 여기에서는 만들어 놓는다.
	extend: 'Ext.Panel',
	id: 'mapoverlay3',
	config:{
		layout: 'fit',
		floating: true,
		hideOnMaskTap: true,
		modal: true,
		centered: true,
		width: 310,
		height: 400,
		listeners: {
			hide: function() {
				this.destroy();
			}
		},
		items: [
				{
					xtype: 'toolbar',
					width: 300,
					docked: 'top',
					items: [{
		           		xtype: 'searchfield',
		           		id: 'map4search',
		           		width: 200,
		            	placeHolder: "Input city name",
		            	autocomplete: true,
		            	autoCreateField: true
					},
					{
		            	xtype: 'button',
		            	iconCls: 'search',
		            	iconMask: true,
		            	handler: function(){
		            		var geocoder;
							geocoder = new google.maps.Geocoder();
							
							function showAddress(){
								 var address = Ext.getCmp("map4search").getValue();
					       			 geocoder.geocode( { 'address': address}, function(results, status) {
					          			if (status == google.maps.GeocoderStatus.OK) {
					          				var map4 = Ext.getCmp("map4");
					            			map4.setMapCenter(results[0].geometry.location);
					    					var marker = new google.maps.Marker({
					    						map: map,
					    						position: results[0].geometry.location,
					    						icon: 'resource/images/mappin1.png'
					            			});
					          			} else {
					            			alert('Geocode was not successful for the following reason: ' + status);
					          			}
					        		});
					      	}
		            		showAddress();
	            		}
	            	}]
				},
				{
		 	 		xtype: 'panel',
		 	 		docked: 'top',
		 	 		style: {'background': '-webkit-gradient(linear, left top, left bottom, from(#FEFCFC), to(#E9E8E8))'},
		 	 		items:[
		 	 			{
		 	 				xtype: 'panel',
		 	 				style: 'margin-top:-2px',
		 	 				html: "<div valign='center' align='center'><font size='1'><b>더블클릭으로 위치를 선택하세요</b></font></div>"
		 	 			}]
 	 			},
				{
					xtype: 'panel',
					docked: 'bottom',
					layout: 'hbox',
					items: [
					{
						xtype: 'button',				
						flex: 1,
						text: '선택완료',
						handler: function(){
							var tingnum = Ext.getCmp("tingmodify").getData().NUMBER;
							
							Ext.data.JsonP.request({
								url: 'http://itscreater.cafe24.com/Triends/TingMapModify.jsp',
								params: {num: tingnum, lat: lat, lng: lng},
								callbackkey: 'callback',
								success: function(){
									navigator.notification.alert(
										'위치를 선택되었습니다.',
										function(){},
										'알림',
										'확인'
									)
								}
							})
							var mdflat = lat;
							var mdflng = lng;
							var mdflatlng = new google.maps.LatLng(mdflat, mdflng); 
							geocoder.geocode({'latLng':mdflatlng}, function(results, status){
								if (status == google.maps.GeocoderStatus.OK) {
					            	if (results[1]) {
					            		var address = results[1].formatted_address;
								 		var tingmdflocation = Ext.getCmp('tingmdflocation');
								 		tingmdflocation.setHtml(address);
					            	}
								}
							});
							var mapOverlay3 = Ext.getCmp("mapoverlay3");
							var map4 = Ext.getCmp("map4");
							map4.destroy();
							mapOverlay3.destroy();
						}
					},
					{
						xtype: 'button',
						flex: 1,
						text: '닫기',
						handler: function(){
							var mapOverlay3 = Ext.getCmp("mapoverlay3");
							var map4 = Ext.getCmp("map4");
							map4.destroy();
							mapOverlay3.destroy();
						}
					}
					]
				}
				]
	}
});

